<template>
	<!--新增对话框-->
	<el-dialog
		:title="editForm.id ? '编辑提示信息' : '新增提示信息'"
		:visible.sync="dialogVisible"
		width="600px"
		:z-index="1001"
		:before-close="handleClose"
	>
		<el-form :model="editForm" :rules="editFormRules" ref="editForm" label-width="100px" class="demo-editForm">
			<el-form-item label="跳转目标" prop="jump_to_target" label-width="100px">
				<el-input v-model="editForm.jump_to_target" autocomplete="off"></el-input>
			</el-form-item>

			<el-form-item label="跳转类型" prop="jump_to_type" label-width="100px">
				<el-radio-group v-model="editForm.jump_to_type">
					<el-radio label="URL">链接</el-radio>
					<el-radio label="POSITION">位置</el-radio>
					<el-radio label="NONE">无</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="语言" prop="lang" label-width="100px">
				<el-input v-model="editForm.lang" autocomplete="off"></el-input>
				<el-select v-model="editForm.parent_id" placeholder="请选择语言，">
					<template v-for="item in tableData">
						<el-option :label="item.name" :value="item.id"></el-option>
					</template>
				</el-select>
			</el-form-item>
			<el-form-item label="提示内容" prop="notice_text" label-width="100px">
				<el-input type="textarea" autosize v-model="editForm.notice_text" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="文本类型" prop="text_type" label-width="100px">
				<el-radio-group v-model="editForm.text_type">
					<el-radio label="TEXT">纯文本</el-radio>
					<el-radio label="RICH_TEXT">富文本</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('editForm')">立即创建</el-button>
				<el-button @click="resetForm('editForm')">重置</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>
</template>

<script>
export default {
	name: 'AddUpdateRole',
	data() {
		return {
			editForm: {},
			editFormRules: {
				position_code: [{ required: true, message: '请输入位置代码', trigger: 'blur' }],
				position_name: [{ required: true, message: '请输入位置名称', trigger: 'blur' }],
				position_sub_code: [{ required: true, message: '请输入位置子代码', trigger: 'blur' }],
				position_sub_name: [{ required: true, message: '请输入位置子名称', trigger: 'blur' }],
			},
			dialogVisible: false,
			tableData: [],
			notice_id: 0,
		};
	},
	methods: {
		resetForm(formName) {
			this.$refs[formName].resetFields();
			this.dialogVisible = false;
			this.editForm = {};
		},
		handleClose() {
			this.resetForm('editForm');
		},
		getEditTable() {
			var indexToUpdate = -1;
			for (var i = 0; i < this.tableData.length; i++) {
				if (this.tableData[i].id === this.editForm.id) {
					indexToUpdate = i;
					break;
				}
			}
			// 如果找到了匹配的id，则进行修改
			if (indexToUpdate !== -1) {
				// 这里可以根据需要修改JSON对象的属性
				var item = JSON.parse(JSON.stringify(this.editForm));
				item.gmt_create = undefined;
				item.gmt_modified = undefined;
				item.notice_id = undefined;
				var info = JSON.parse(JSON.stringify(this.tableData));
				info[indexToUpdate] = item;
				// 输出修改后的数组
				return info;
			} else {
				console.log('未找到匹配的id');
			}
		},
		getNewTable() {
			var info = JSON.parse(JSON.stringify(this.tableData));
			info.push(this.editForm);
			return info;
		},
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					const info = {
						notice_id: this.notice_id,
						save_request_list: this.editForm.id ? this.getEditTable() : this.getNewTable(),
					};
					this.$axios.post('/notice/edit', info).then((res) => {
						this.$message({
							showClose: true,
							message: '恭喜你，操作成功',
							type: 'success',
							onClose: () => {
								this.$emit('refreshDataList');
							},
						});
						this.dialogVisible = false;
						this.resetForm(formName);
					});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},

		init(tableData, id, item) {
			this.dialogVisible = true;
			this.tableData = tableData;
			this.editForm = item;
			this.notice_id = id;
			// if (id != null && id != '' && id > 0) {
			// 	this.$axios.get('/admin/role/info/' + id).then((res) => {

			// 	});
			// }
		},
	},
};
</script>

<style scoped></style>
